<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>初次设置引导 - 孕育宝典</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #fff6f8;
                color: #333;
            }
            .container {
                max-width: 390px;
                margin: 0 auto;
                min-height: 100vh;
                padding: 20px;
                background-color: white;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            }
            .header {
                text-align: center;
                margin-bottom: 30px;
                padding-top: 40px;
            }
            .logo {
                width: 70px;
                height: 70px;
                background-color: #ff9fb5;
                color: white;
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 34px;
                margin: 0 auto 15px;
            }
            .steps {
                display: flex;
                justify-content: center;
                margin-bottom: 30px;
            }
            .step {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background-color: #eee;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #999;
                margin: 0 15px;
                position: relative;
            }
            .step.active {
                background-color: #ff9fb5;
                color: white;
            }
            .step.completed {
                background-color: #ff9fb5;
                color: white;
            }
            .step.completed::after {
                content: '✓';
            }
            .step::before {
                content: '';
                position: absolute;
                top: 50%;
                right: 100%;
                width: 30px;
                height: 2px;
                background-color: #eee;
                transform: translateY(-50%);
                margin-right: 5px;
            }
            .step:first-child::before {
                display: none;
            }
            .step.active ~ .step::before,
            .step.completed ~ .step::before {
                background-color: #eee;
            }
            .step.active::before,
            .step.completed::before {
                background-color: #ff9fb5;
            }
            .option-card {
                border: 2px solid #f0f0f0;
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 15px;
                cursor: pointer;
                transition: all 0.2s;
                position: relative;
            }
            .option-card:hover {
                border-color: #ffd6e0;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            }
            .option-card.selected {
                border-color: #ff9fb5;
                background-color: #fff6f8;
            }
            .option-card.selected::after {
                content: '✓';
                position: absolute;
                right: 15px;
                top: 15px;
                background-color: #ff9fb5;
                color: white;
                width: 24px;
                height: 24px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
            }
            .form-section {
                display: none;
                margin-top: 25px;
                animation: fadeIn 0.3s;
            }
            .form-section.active {
                display: block;
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-label {
                display: block;
                font-size: 14px;
                color: #666;
                margin-bottom: 8px;
            }
            .form-control {
                width: 100%;
                padding: 12px 15px;
                border: 1px solid #e0e0e0;
                border-radius: 8px;
                font-size: 16px;
                transition: border-color 0.2s;
            }
            .form-control:focus {
                border-color: #ff9fb5;
                outline: none;
            }
            .btn {
                display: block;
                width: 100%;
                padding: 14px;
                background-color: #ff9fb5;
                color: white;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.2s;
                margin-top: 20px;
            }
            .btn:disabled {
                background-color: #ffd6e0;
                cursor: not-allowed;
            }
            .btn:hover:not(:disabled) {
                background-color: #ff89a3;
            }
            .step-title {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 15px;
                text-align: center;
            }
            .step-description {
                font-size: 15px;
                color: #666;
                margin-bottom: 25px;
                text-align: center;
            }
            .option-title {
                font-weight: 600;
                margin-bottom: 5px;
                display: flex;
                align-items: center;
            }
            .option-title i {
                margin-right: 10px;
                color: #ff9fb5;
            }
            .option-desc {
                font-size: 13px;
                color: #777;
            }
            .date-picker,
            .number-input {
                position: relative;
            }
            .date-picker input {
                padding-right: 40px;
            }
            .date-picker::after {
                content: '\f133';
                font-family: 'Font Awesome 6 Free';
                font-weight: 900;
                position: absolute;
                right: 15px;
                top: 50%;
                transform: translateY(-50%);
                color: #999;
                pointer-events: none;
            }
            .number-input {
                position: relative;
            }
            .number-input input {
                padding-right: 40px;
            }
            .number-control {
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                display: flex;
                flex-direction: column;
                gap: 2px;
            }
            .number-control button {
                width: 24px;
                height: 17px;
                background-color: #f5f5f5;
                border: none;
                border-radius: 4px;
                font-size: 12px;
                color: #666;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .number-control button:hover {
                background-color: #ffd6e0;
            }
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(10px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .help-text {
                font-size: 12px;
                color: #888;
                margin-top: 5px;
            }
            .back-btn {
                font-size: 14px;
                color: #777;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                margin-bottom: 20px;
            }
            .back-btn i {
                margin-right: 5px;
            }
            .back-btn:hover {
                color: #ff9fb5;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <div class="logo">
                    <i class="fas fa-seedling"></i>
                </div>
                <h1 class="text-xl font-bold">欢迎使用孕育宝典</h1>
                <p class="text-sm text-gray-500 mt-2">请完成几个简单的设置以个性化您的体验</p>
            </div>

            <div class="steps">
                <div class="step active">1</div>
                <div class="step">2</div>
                <div class="step">3</div>
            </div>

            <!-- 步骤1: 选择阶段 -->
            <div class="step-content active" id="step1">
                <h2 class="step-title">您目前处于哪个阶段？</h2>
                <p class="step-description">我们将为您提供个性化的内容与建议</p>

                <div class="option-card" data-value="preparing" onclick="selectOption(this)">
                    <div class="option-title">
                        <i class="fas fa-heart"></i>
                        备孕阶段
                    </div>
                    <div class="option-desc">正在准备怀孕，需要经期追踪、排卵预测等功能</div>
                </div>

                <div class="option-card" data-value="pregnant" onclick="selectOption(this)">
                    <div class="option-title">
                        <i class="fas fa-baby"></i>
                        孕期阶段
                    </div>
                    <div class="option-desc">已经怀孕，需要胎儿发育、产检管理等功能</div>
                </div>

                <div class="option-card" data-value="postpartum" onclick="selectOption(this)">
                    <div class="option-title">
                        <i class="fas fa-baby-carriage"></i>
                        产后阶段
                    </div>
                    <div class="option-desc">已经生产，需要产后恢复、婴儿成长等功能</div>
                </div>

                <button class="btn" disabled id="step1Btn" onclick="goToStep(2)">下一步</button>
            </div>

            <!-- 步骤2: 填写相关信息 -->
            <div class="step-content" id="step2" style="display: none">
                <a href="#" class="back-btn" onclick="goToStep(1); return false;"
                    ><i class="fas fa-arrow-left"></i> 返回</a
                >

                <!-- 备孕阶段表单 -->
                <div class="form-section" id="preparingForm">
                    <h2 class="step-title">备孕信息</h2>
                    <p class="step-description">这些信息将帮助我们更准确地预测您的排卵期和生育窗口</p>

                    <div class="form-group">
                        <label class="form-label">上一次经期开始日期</label>
                        <div class="date-picker">
                            <input type="date" class="form-control" id="lastPeriodDate" onchange="validateForm()" />
                        </div>
                        <div class="help-text">请选择您最近一次月经的第一天</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">平均经期天数</label>
                        <div class="number-input">
                            <input
                                type="number"
                                class="form-control"
                                id="periodDuration"
                                min="1"
                                max="15"
                                value="5"
                                onchange="validateForm()"
                            />
                            <div class="number-control">
                                <button onclick="adjustNumber('periodDuration', 1)">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                                <button onclick="adjustNumber('periodDuration', -1)">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                        <div class="help-text">月经通常持续的天数（一般为3-7天）</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">平均月经周期</label>
                        <div class="number-input">
                            <input
                                type="number"
                                class="form-control"
                                id="cycleDuration"
                                min="21"
                                max="45"
                                value="28"
                                onchange="validateForm()"
                            />
                            <div class="number-control">
                                <button onclick="adjustNumber('cycleDuration', 1)">
                                    <i class="fas fa-chevron-up"></i>
                                </button>
                                <button onclick="adjustNumber('cycleDuration', -1)">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                        <div class="help-text">从一次月经开始到下一次月经开始的天数（一般为28天）</div>
                    </div>
                </div>

                <!-- 孕期阶段表单 -->
                <div class="form-section" id="pregnantForm">
                    <h2 class="step-title">孕期信息</h2>
                    <p class="step-description">这些信息将帮助我们计算您当前的孕周和预产期</p>

                    <div class="form-group">
                        <label class="form-label">末次月经第一天</label>
                        <div class="date-picker">
                            <input
                                type="date"
                                class="form-control"
                                id="lastMenstrualPeriod"
                                onchange="validateForm()"
                            />
                        </div>
                        <div class="help-text">医生通常用这个日期来计算孕周和预产期</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">已知的预产期（可选）</label>
                        <div class="date-picker">
                            <input type="date" class="form-control" id="dueDate" />
                        </div>
                        <div class="help-text">如果医生已经给您确定了预产期，可以填写此项</div>
                    </div>
                </div>

                <!-- 产后阶段不需要额外表单 -->
                <div class="form-section" id="postpartumForm">
                    <h2 class="step-title">产后信息</h2>
                    <p class="step-description">您已经进入产后阶段，我们将为您提供产后恢复和婴儿成长的相关内容</p>

                    <div class="form-group">
                        <label class="form-label">宝宝出生日期（可选）</label>
                        <div class="date-picker">
                            <input type="date" class="form-control" id="birthDate" />
                        </div>
                        <div class="help-text">填写此项可以获取适合宝宝月龄的专业建议</div>
                    </div>
                </div>

                <button class="btn" disabled id="step2Btn" onclick="goToStep(3)">下一步</button>
            </div>

            <!-- 步骤3: 完成设置 -->
            <div class="step-content" id="step3" style="display: none">
                <a href="#" class="back-btn" onclick="goToStep(2); return false;"
                    ><i class="fas fa-arrow-left"></i> 返回</a
                >

                <div class="text-center">
                    <div style="font-size: 60px; color: #ff9fb5; margin: 30px 0">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h2 class="step-title">设置完成！</h2>
                    <p class="step-description">感谢您完成基础设置，现在开始使用孕育宝典来记录您的孕育之旅吧！</p>

                    <div style="margin: 40px 0">
                        <div id="setupSummary" class="text-left bg-gray-50 p-4 rounded-lg">
                            <!-- 这里将动态填充用户的设置信息 -->
                        </div>
                    </div>

                    <a href="unified_home.html" class="btn" id="enterHomeBtn">进入首页</a>
                </div>
            </div>
        </div>

        <script>
            let selectedOption = null;

            // 选择阶段选项
            function selectOption(element) {
                // 移除之前的选择
                document.querySelectorAll('.option-card').forEach((card) => {
                    card.classList.remove('selected');
                });

                // 添加新的选择
                element.classList.add('selected');
                selectedOption = element.getAttribute('data-value');

                // 启用下一步按钮
                document.getElementById('step1Btn').disabled = false;
            }

            // 验证表单
            function validateForm() {
                let isValid = false;

                if (selectedOption === 'preparing') {
                    const lastPeriodDate = document.getElementById('lastPeriodDate').value;
                    const periodDuration = document.getElementById('periodDuration').value;
                    const cycleDuration = document.getElementById('cycleDuration').value;

                    isValid =
                        lastPeriodDate &&
                        periodDuration >= 1 &&
                        periodDuration <= 15 &&
                        cycleDuration >= 21 &&
                        cycleDuration <= 45;
                } else if (selectedOption === 'pregnant') {
                    const lastMenstrualPeriod = document.getElementById('lastMenstrualPeriod').value;
                    isValid = lastMenstrualPeriod;
                } else if (selectedOption === 'postpartum') {
                    // 产后阶段无必填字段
                    isValid = true;
                }

                document.getElementById('step2Btn').disabled = !isValid;
            }

            // 调整数值输入框
            function adjustNumber(elementId, change) {
                const input = document.getElementById(elementId);
                let value = parseInt(input.value) || 0;
                value += change;

                // 确保值在有效范围内
                if (elementId === 'periodDuration') {
                    value = Math.max(1, Math.min(15, value));
                } else if (elementId === 'cycleDuration') {
                    value = Math.max(21, Math.min(45, value));
                }

                input.value = value;
                validateForm();
            }

            // 切换步骤
            function goToStep(step) {
                // 隐藏所有步骤
                document.querySelectorAll('.step-content').forEach((content) => {
                    content.style.display = 'none';
                });

                // 更新步骤指示器
                document.querySelectorAll('.step').forEach((stepIndicator, index) => {
                    stepIndicator.classList.remove('active', 'completed');

                    if (index + 1 < step) {
                        stepIndicator.classList.add('completed');
                    } else if (index + 1 === step) {
                        stepIndicator.classList.add('active');
                    }
                });

                // 显示当前步骤
                document.getElementById(`step${step}`).style.display = 'block';

                // 如果是第2步，显示相应的表单
                if (step === 2) {
                    document.querySelectorAll('.form-section').forEach((section) => {
                        section.classList.remove('active');
                    });

                    if (selectedOption === 'preparing') {
                        document.getElementById('preparingForm').classList.add('active');
                    } else if (selectedOption === 'pregnant') {
                        document.getElementById('pregnantForm').classList.add('active');
                    } else if (selectedOption === 'postpartum') {
                        document.getElementById('postpartumForm').classList.add('active');
                    }
                }

                // 如果是第3步，生成摘要信息
                if (step === 3) {
                    generateSummary();

                    // 设置"进入首页"按钮的链接和行为
                    setupEnterHomeButton();
                }
            }

            // 设置"进入首页"按钮
            function setupEnterHomeButton() {
                const enterHomeBtn = document.getElementById('enterHomeBtn');

                // 保存用户选择的状态到localStorage
                localStorage.setItem('userStatus', selectedOption);

                // 收集并保存表单数据
                let userData = { status: selectedOption };

                if (selectedOption === 'preparing') {
                    userData.lastPeriodDate = document.getElementById('lastPeriodDate').value;
                    userData.periodDuration = document.getElementById('periodDuration').value;
                    userData.cycleDuration = document.getElementById('cycleDuration').value;
                } else if (selectedOption === 'pregnant') {
                    userData.lastMenstrualPeriod = document.getElementById('lastMenstrualPeriod').value;
                    userData.dueDate = document.getElementById('dueDate').value;
                } else if (selectedOption === 'postpartum') {
                    userData.birthDate = document.getElementById('birthDate').value;
                }

                localStorage.setItem('userData', JSON.stringify(userData));
            }

            // 生成设置摘要
            function generateSummary() {
                let summaryHTML = '<div class="font-bold mb-2">您的设置摘要：</div>';

                if (selectedOption === 'preparing') {
                    const lastPeriodDate = new Date(document.getElementById('lastPeriodDate').value);
                    const formattedDate = lastPeriodDate.toLocaleDateString('zh-CN', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                    });

                    summaryHTML += `
                    <div class="mb-1">• 阶段：备孕阶段</div>
                    <div class="mb-1">• 上次经期：${formattedDate}</div>
                    <div class="mb-1">• 经期天数：${document.getElementById('periodDuration').value}天</div>
                    <div class="mb-1">• 月经周期：${document.getElementById('cycleDuration').value}天</div>
                    <div class="mt-2 text-sm text-gray-600">我们已为您计算好排卵日期和最佳受孕时间</div>
                `;
                } else if (selectedOption === 'pregnant') {
                    const lmpDate = new Date(document.getElementById('lastMenstrualPeriod').value);
                    const formattedLmp = lmpDate.toLocaleDateString('zh-CN', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                    });

                    // 简单计算孕周（当前日期 - 末次月经日期）/ 7，向下取整
                    const today = new Date();
                    const diffTime = Math.abs(today - lmpDate);
                    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                    const weeks = Math.floor(diffDays / 7);
                    const days = diffDays % 7;

                    // 计算预产期（末次月经日期 + 280天）
                    const dueDate = new Date(lmpDate);
                    dueDate.setDate(dueDate.getDate() + 280);
                    const formattedDueDate = dueDate.toLocaleDateString('zh-CN', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric',
                    });

                    summaryHTML += `
                    <div class="mb-1">• 阶段：孕期阶段</div>
                    <div class="mb-1">• 末次月经：${formattedLmp}</div>
                    <div class="mb-1">• 当前孕周：${weeks}周${days}天</div>
                    <div class="mb-1">• 预产期：${formattedDueDate}</div>
                    <div class="mt-2 text-sm text-gray-600">我们已为您准备了适合当前孕周的内容</div>
                `;
                } else if (selectedOption === 'postpartum') {
                    let babyInfo = '';
                    const birthDate = document.getElementById('birthDate').value;

                    if (birthDate) {
                        const birthDateObj = new Date(birthDate);
                        const formattedBirthDate = birthDateObj.toLocaleDateString('zh-CN', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                        });

                        // 计算宝宝月龄
                        const today = new Date();
                        const diffTime = Math.abs(today - birthDateObj);
                        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                        const months = Math.floor(diffDays / 30);
                        const days = diffDays % 30;

                        babyInfo = `
                        <div class="mb-1">• 宝宝出生日期：${formattedBirthDate}</div>
                        <div class="mb-1">• 宝宝月龄：${months}个月${days}天</div>
                    `;
                    }

                    summaryHTML += `
                    <div class="mb-1">• 阶段：产后阶段</div>
                    ${babyInfo}
                    <div class="mt-2 text-sm text-gray-600">我们已为您准备了产后恢复和婴儿护理内容</div>
                `;
                }

                document.getElementById('setupSummary').innerHTML = summaryHTML;
            }
        </script>
    </body>
</html>
